<template>
  <view class="question-content">
    <view class="question-title">{{ questionData.title }}</view>
  </view>
  <!-- 单选 -->
  <nut-radio-group v-if="questionData.type === 1">
    <nut-cell v-for="(option, index) in questionData.options" :key="index" class="option-item" :class="{
      active: selectedOption === option.value,
      correct: isCorrect === '1' && option.value === questionData.correctAnswer,
      wrong: isCorrect === '-1' && option.value !== questionData.correctAnswer &&
        selectedOption === option.value
    }" @click="onClickOption(option.value)">
      <nut-radio :label="option.value" class="full-width-radio">
        <text class="option-key">{{ getOptionLabel(index) }}</text>
        <text class="option-text">{{ option.label }}</text>
      </nut-radio>
    </nut-cell>
  </nut-radio-group>

  <!-- 多选 -->
  <nut-checkbox-group v-if="questionData.type === 2">
    <nut-cell v-for="(option, index) in questionData.options" :key="index" class="option-item" :class="{
      active: selectedOption.includes(option.value),
      correct: isCorrect === '1' && questionData.correctAnswer.includes(option.value) && selectedOption.includes(option.value),
      wrong: isCorrect === '-1' && selectedOption.includes(option.value)
    }" @click="onClickOption(option.value)">
      <nut-checkbox :label="option.value" class="full-width-checkbox">
        <text class="option-key">{{ getOptionLabel(index) }}</text>
        <text class="option-text">{{ option.label }}</text>
      </nut-checkbox>
    </nut-cell>
  </nut-checkbox-group>

  <!-- 判断题 -->
  <nut-radio-group v-if="questionData.type === 3">
    <nut-cell v-for="(option, index) in questionData.options.slice(0, 2)" :key="index" class="option-item" :class="{
      active: selectedOption === option.value,
      correct: isCorrect === '1' && option.value === questionData.correctAnswer,
      wrong: isCorrect === '-1' && option.value !== questionData.correctAnswer && selectedOption === option.value
    }" @click="onClickOption(option.value)">
      <nut-radio :label="option.value" class="full-width-radio">
        <text class="option-key">{{ getOptionLabel(index) }}</text>
        <text class="option-text">{{ option.label }}</text>
      </nut-radio>
    </nut-cell>
  </nut-radio-group>

  <!-- 解析内容 -->
  <view v-if="showAnalysisContent" class="analysis-content">
    <view class="analysis-title">题目解析</view>
    <!-- <view class="analysis-answer">正确答案：{{ answerText }}</view>
  <view class="analysis-user-answer">我的答案：{{ userAnswerText }}</view> -->
    <view class="analysis-comparison">
      <view class="analysis-answer">
        正确答案：{{ answerText }}
      </view>
      <view class="analysis-user-answer">
        我的答案：{{ userAnswerText }}
      </view>
    </view>
    <view class="analysis-text" v-html="questionData.analysis"></view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps([
  'questionData',
  'selectedOption',
  'isCorrect',
  'showAnalysisContent',
  'userAnswerText',
  'answerText',
])

const emit = defineEmits(['update:selectedOption', 'onClick:Option'])

const getOptionLabel = (index) => {
  return String.fromCharCode(65 + index)
}

const onClickOption = (val) => {
  emit('onClick:Option', val)
}
</script>

<style lang="scss" scoped></style>